<template>
	<div class="home h100">
		<div id="sidebar" :style="{width: isCollapse ? '64px' : '240px'}">
			<el-menu :default-active="menuIdx" @select="handleSelectSidebarChange" :router="true" :unique-opened="true" :collapse="isCollapse" background-color="#324157" text-color="#BFCBD9" active-text-color="#fff">
				<template v-for="item in sidebarData">
					<el-submenu v-if="item.children" :key="item.text" :index="'/' + item.path">
						<template slot="title">
							<i :class="item.iconClass"></i>
							<span slot="title">{{item.text}}</span>
						</template>
						<el-menu-item-group v-for="items in item.children" :key="items.path">
							<el-menu-item :index="'/'+ item.path + '/' + items.path">
								<i :class="items.iconClass"></i>
								<span slot="title">{{items.text}}</span>
							</el-menu-item>
						</el-menu-item-group>
					</el-submenu>
					<el-menu-item :index="'/' + item.path" v-if="!item.children">
						<i :class="item.iconClass"></i>
						<span slot="title">{{item.text}}</span>
					</el-menu-item>
				</template>
			</el-menu>
		</div>

		<div id="main-content" :style="{left: isCollapse ? '64px' : '240px'}">
			<div id="navbar">
				<div class="info">
					<div class="logo" @click="isCollapse = !isCollapse">
						<i class="iconfont icon-menu"></i>
					</div>
					<el-breadcrumb separator-class="el-icon-arrow-right">
						<el-breadcrumb-item v-for="(item,idx) in breadcrumbData" :key="idx" :to="{ path: item.path }">{{item.name}}</el-breadcrumb-item>
					</el-breadcrumb>
					<div class="tags-link">
						<router-link :to="{ path: item.path }" v-for="item in tagsData" :key="item.path">
							<el-tag :type="item.isActive ? 'primary' : 'info'" closable size="small" @close="handleCloseTags(item,$event)">{{item.text}}</el-tag>
						</router-link>
					</div>
				</div>
				<div class="user-info">
					<el-dropdown trigger="click">
						<div class="avatar-wrapper">
							<!--<i class="iconfont icon-log-out"></i>-->
							<img src="http://jack.snailsocker.com/wp-content/themes/JieStyle-Two/images/avatar.jpg" />
							<i class="el-icon-caret-bottom"></i>
						</div>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item>
								<el-button type="text" @click="resetPwd">修改密码</el-button>
							</el-dropdown-item>
							<el-dropdown-item>
								<el-button type="text" @click="logout">退出登录</el-button>
							</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
			</div>
			<router-view></router-view>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'home',
		data() {
			return {
				editableTabsValue: '',
				editableTabs: [],
				menuIdx: sessionStorage.getItem('menuIdx') || '/index',
				navbarData: [],
				breadcrumbData: [],
				tagsData: [],
				sidebarData: [{
					text: '首页',
					path: 'index',
					iconClass: 'iconfont icon-home'
				}, {
					text: '测试',
					path: 'test',
					iconClass: 'iconfont icon-test'
				}, {
					text: '图表',
					path: 'charts',
					iconClass: 'iconfont icon-charts',
					children: [{
						text: '线性图表',
						path: 'linecharts',
						iconClass: 'iconfont icon-line'
					}, {
						text: '漏斗图表',
						path: 'funnel',
						iconClass: 'iconfont icon-loudou'
					}, {
						text: '仪表盘',
						path: 'gauge',
						iconClass: 'iconfont icon-yibiaopan'
					}]
				}, {
					text: '表格',
					path: 'table',
					iconClass: 'iconfont icon-table'
				}, {
					text: '字符',
					path: 'icon',
					iconClass: 'iconfont icon-iconfonthuahua',
					children: [{
						text: '饿了么UI icons',
						path: 'ele_icons',
						iconClass: 'iconfont icon-line'
					}, {
						text: '其他icons',
						path: 'other_icons',
						iconClass: 'iconfont icon-loudou'
					}]
				}],
				isCollapse: false
			}
		},
		computed: {

		},
		methods: {
			resetPwd() {
				console.log('重置密码')
			},
			logout() {
				console.log('退出登录')
			},
			handleTabsEdit(targetName, action) {
				if(action === 'add') {
					let newTabName = ++this.tabIndex + '';
					this.editableTabs.push({
						title: 'New Tab',
						name: newTabName,
						content: 'New Tab content'
					});
					this.editableTabsValue = newTabName;
				}
				if(action === 'remove') {
					let tabs = this.editableTabs;
					let activeName = this.editableTabsValue;
					if(activeName === targetName) {
						tabs.forEach((tab, index) => {
							if(tab.name === targetName) {
								let nextTab = tabs[index + 1] || tabs[index - 1];
								if(nextTab) {
									activeName = nextTab.name;
								}
							}
						});
					}

					this.editableTabsValue = activeName;
					this.editableTabs = tabs.filter(tab => tab.name !== targetName);
				}
			},
			handleSelectSidebarChange(menuIdx, a, menu) {
				sessionStorage.setItem('menuIdx', menuIdx);
				this.$router.push(menuIdx);
				var isPush = false;
				let matched = this.$route.matched.filter(item => item.name)
				const first = matched[0];
				this.breadcrumbData = matched;

				if(this.tagsData.length == 0) {
					isPush = true;
				} else {
					for(var i = 0, len = this.tagsData.length; i < len; i++) {
						if(this.tagsData[i].text == matched[matched.length - 1].name && this.tagsData[i].path == menuIdx) {
							isPush = false;
							this.tagsData[i].isActive = true;
							for(var k = 0, len = this.tagsData.length; k < len; k++) {
								if(i != k) {
									this.tagsData[k].isActive = false;
								}
							}
							break;
							return;
						} else {
							this.tagsData[i].isActive = false;
							isPush = true;
							continue;
						}
					}
				}
				if(isPush) {
					this.tagsData.push({
						text: matched[matched.length - 1].name,
						path: menuIdx,
						isActive: true
					});
				}
			},
			handleCloseTags(item, $event) {
				var linkUrl = null;
				for(var i = 0, len = this.tagsData.length; i < len; i++) {
					if(this.tagsData[i].text == item.text && this.tagsData[i].path == item.path) {
						this.tagsData.splice(i, 1);
						this.tagsData[this.tagsData.length - 1].isActive = true;
						linkUrl = this.tagsData.length == 0 ? '/' : this.tagsData[this.tagsData.length - 1].path;
						this.menuIdx = linkUrl;
						this.$router.push(linkUrl);
						$event.preventDefault();
						break;
					}
				}
			},
			initAll() {
				let matched = this.$route.matched.filter(item => item.name)
				const first = matched[0];
				this.breadcrumbData = matched;
				this.tagsData = sessionStorage.getItem('tagsData') || [{
					text: matched[matched.length - 1].name,
					path: matched[matched.length - 1].path,
					isActive: true
				}];
				this.menuIdx = matched[matched.length - 1].path;
			}
		},
		created() {
			this.api.setHeader('首页');
			this.initAll();
			//			const loading = this.api.showLoading();
			//
			//			setTimeout(() => {
			//				loading.close();
			//			}, 2000);
		},
		mounted() {}
	}
</script>

<style lang="less">
	.home {
		#sidebar {
			position: fixed;
			top: 0;
			left: 0;
			bottom: 0;
			z-index: 10;
			height: 100%;
			background-color: #324157;
			transition: width 300ms ease-in-out;
		}
		#main-content {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 240px;
			transition: left 300ms ease-in-out;
			z-index: 1;
		}
		#navbar {
			width: 100%;
			height: 60px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 15px;
			border-bottom: 1px solid #DDDDDD;
			box-sizing: border-box;
			.info {
				display: flex;
				align-items: center;
				&>div {
					margin-right: 15px;
					i.iconfont {
						cursor: pointer;
						font-size: 24px;
						color: #1891EE;
					}
				}
				.tags-link {
					width: 500px;
					overflow: hidden;
					white-space: nowrap;
					.el-tag {
						margin-right: 5px;
					}
				}
			}
		}
		.el-menu {
			border-right: none;
		}
		.avatar-wrapper {
			display: flex;
			align-items: center;
			img {
				cursor: pointer;
				width: 30px;
				height: 30px;
				border-radius: 50%;
				margin-right: 10px;
			}
		}
		.el-menu-item.is-active {
			background-color: #1891EE !important;
		}
	}
</style>